<template>
    <div class="person">
        <h1>中国</h1>
        <!-- 不建议用id, 因为父链组件中可能存在同id的其他元素 -->
        <!-- <h2 id="title2">成都</h2> -->
        <h2 ref="title2">成都</h2>
        <h3>锦里</h3>
        <button @click="showLog">点我输出h2元素</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script setup lang="ts">
import { reactive, ref, watch, watchEffect, defineExpose } from 'vue'
// 创建一个title2,用于存储ref标记的内容
let title2 = ref()
let a = ref(0)
let b = ref(1)
let c = ref(2)

function showLog() {
    // console.log(document.getElementById('title2'))
    // 此时就不会调用到父链的title2了,无论id还是ref
    console.log(title2.value)
}

// 通过使用defineExpose暴露数据
defineExpose({ a, b, c })
</script>

<!-- scoped: 局部样式,避免同名选择器冲突 -->
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 2px;
}

li {
    font-size: 15px;
}
</style>